<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width,user-scalable=no"name="viewport">
<title>我要评价</title>	
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/customer/css/base.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/customer/css/style.css" />
<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/customer/css/bootstrap.min.css" />
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/customer/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/customer/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="{:C('WEB_URL')}Public/customer/js/script.js"></script>


</head>
<body>
<div id="box">
 <div class="navbar navbar-default navbar-fixed-top">
  <header>
   <h1><a href="#"><span class="glyphicon glyphicon-menu-left"></span></a></h1>
   <p class="title">我要评价</p>
  </header>
 </div><!--navbar-fixed-top-->
<form id="myForm" method="post">
 
 <div class="appraiseCon">
  <div class="starts">
   <span class="appraise"><img src="{:C('WEB_URL')}Public/customer/images/1_11.jpg" /> 描述相符</span>
   <ul id="pingStar">
    <li rel="1" title="非常糟糕"></li>
    <li rel="2" title="糟糕"></li>
    <li rel="3" title="一般"></li>
    <li rel="4" title="满意"></li>
    <li rel="5" title="非常满意"></li> 
   </ul>
   <span id="dir"></span>
   <input type="hidden" value="" name='inp' id="startP">
  </div>

  <div class="appraiseOne">
   <textarea cols="65" rows="7" name='content'>宝贝满足你的期待吗？说说您的心得，分享给想买的他们吧！</textarea>
  </div><!--appraiseOne-->
  <div class="appraiseTwo">
   <p><img src="{:C('WEB_URL')}Public/customer/images/appraise-01.jpg" />匿名</p>
   <p class="raiseRight">您写的评价会以匿名的形式展现</p>
  </div><!--appraiseTwo-->
  <div class="appraiseThree">
   <p><img src="{:C('WEB_URL')}Public/customer/images/mores_10.jpg" />店铺评分</p>
   <div class="shop-rating">
	<span class="titles">物流服务：</span>
	<ul class="rating-level" id="stars1">
		<li rel="1"><a class="one-star" href="#"></a></li>
		<li rel="2"><a class="two-stars" href="#"></a></li>
		<li rel="3"><a class="three-stars" href="#"></a></li>
		<li rel="4"><a class="four-stars" href="#"></a></li>
		<li rel="5"><a class="five-stars" href="#"></a></li>
	</ul>
	<span class="result" id="stars1-tips"></span>
	<input type="hidden" id="stars1-input" name="stars1" value="" size="2" />
</div>

<!--
	# 星级评分
	# star:value = 分数
-->
<div class="shop-rating">
	<span class="titles">服务态度：</span>
	<ul class="rating-level" id="stars2">
		<li rel="1"><a class="one-star" href="#"></a></li>
		<li rel="2"><a class="two-stars" href="#"></a></li>
		<li rel="3"><a class="three-stars" href="#"></a></li>
		<li rel="4"><a class="four-stars" href="#"></a></li>
		<li rel="5"><a class="five-stars" href="#"></a></li>
	</ul>
	<span class="result" id="stars2-tips"></span>
	<input type="hidden" id="stars2-input" name="stars2" value="" size="2" />
</div>
<!-- END 星级评分 -->
  </div><!--appraiseThree-->
  <div class="appraiseFour">
   <p><a id="cun" >发布</a></p>
   	</form>
  </div><!--appraiseFour-->
 </div>
 <div class="navbar navbar-default navbar-fixed-bottom">
   <footer id="foot">
    <dl>
     <dt><a href="{:U('User/index')}"><img src="{:C('WEB_URL')}Public/customer/images/mores_15.jpg" /></a></dt>
     <dd><a href="{:U('User/index')}">首页</a></dd>
    </dl>
    <dl>
     <dt><a href="http://www.nleaves.com/qinqin/wechat/user/recommends?uid={$_SESSION[user_id]}"><img src="{:C('WEB_URL')}Public/customer/images/mores_17.jpg" /></a></dt>
     <dd><a href="http://www.nleaves.com/qinqin/wechat/user/recommends?uid={$_SESSION[user_id]}">推荐有奖</a></dd>
    </dl>
    <dl>
     <dt><a href="{:U('User/more')}"><img src="{:C('WEB_URL')}Public/customer/images/mores_19.jpg" /></a></dt>
     <dd><a href="{:U('User/more')}" class="current">更多</a></dd>
    </dl>
   </footer>
  </div><!--/navbar-->
<div><!--box-->
<!--上方星星评价效果-->
<script type="text/javascript">
   window.onload = function () {
 var s = document.getElementById("pingStar"),
  m = document.getElementById('dir'),
  n = s.getElementsByTagName("li"),
  input = document.getElementById('startP'); //保存所选值
 clearAll = function () {
  for (var i = 0; i < n.length; i++) {
   n[i].className = '';
  }
 }
 for (var i = 0; i < n.length; i++) {
  n[i].onclick = function () {
   var q = this.getAttribute("rel");
   clearAll();
   input.value = q;
   for (var i = 0; i < q; i++) {
    n[i].className = 'on';
   }
   m.innerHTML = this.getAttribute("title");
  }
  n[i].onmouseover = function () {
   var q = this.getAttribute("rel");
   clearAll();
   for (var i = 0; i < q; i++) {
    n[i].className = 'on';
   }
  }
  n[i].onmouseout = function () {
   clearAll();
   for (var i = 0; i < input.value; i++) {
    n[i].className = 'on';
   }
  }
 }
}
    </script>
<script type="text/javascript">
//下方星星评价效果
var Class = {
	create: function() {
		return function() { this.initialize.apply(this, arguments); }
	}
}
var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
}
function stopDefault( e ) {
	 if ( e && e.preventDefault ){
		e.preventDefault();
	}else{
		window.event.returnValue = false;
	}
	return false;
} 
/**
 * 星星打分组件
 *
 * @author	Yunsd
 * @date		2010-7-5
 */
var Stars = Class.create();
Stars.prototype = {
	initialize: function(star,options) {
		this.SetOptions(options); //默认属性
		var flag = 999; //定义全局指针
		var isIE = (document.all) ? true : false; //IE?
		var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
		var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
		var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
		var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
		var tipsTxt = this.options.tipsTxt; // 定义提示文案
		var len = starlist.length; //星星数量
		

		for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
			starlist[i].value = i;
			starlist[i].onclick = function(e){
				stopDefault(e);
				this.className = this.className + nowClass;
				flag = this.value;
				input.value = this.getAttribute("star:value");
				tips.innerHTML = tipsTxt[this.value]
			}
			starlist[i].onmouseover = function(){
				if (flag< 999){
					var reg = RegExp(nowClass,"g");
					starlist[flag].className = starlist[flag].className.replace(reg,"")
				}
			}
			starlist[i].onmouseout = function(){
				if (flag< 999){
					starlist[flag].className = starlist[flag].className + nowClass;
				}
			}
		};
		if (isIE){ //FIX IE下样式错误
			var li = document.getElementById(star).getElementsByTagName('li');
			for (var i = 0, len = li.length; i < len; i++) {
				var c = li[i];
				if (c) {
					c.className = c.getElementsByTagName('a')[0].className;
				}
			}
		}
	},
	//设置默认属性
	SetOptions: function(options) {
		this.options = {
			Input:			"",
			Tips:			"",
			nowClass:	"current-rating",
			tipsTxt:		["非常糟糕","糟糕","一般","满意","非常满意"]
		};
		Extend(this.options, options || {});
	}
}
var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["非常糟糕","糟糕","一般","满意","非常满意"]})
var Stars2 = new Stars("stars2")



	function check_form(form_id) {
				last_submit = $('#' + form_id).data('last_submit');
				current_submit = new Date().getTime();
				if (last_submit == undefined) {
					$('#' + form_id).data('last_submit', new Date().getTime());
				} else {
					if (current_submit - last_submit > 600) {
						$('#' + form_id).data('last_submit', new Date().getTime());
					} else {
						return false;
					}
				}
				if ( typeof (tinyMCE) != 'undefined') {
					tinyMCE.triggerSave(true);
				}

				var check_flag = true;
				$("#" + form_id + " :input").each(function(i) {
					if ($(this).attr("check")) {
						if (!validate($(this).val(), $(this).attr("check"))) {
							ui_error($(this).attr("msg"));
							$(this).focus();
							check_flag = false;
							return check_flag;
						}
					}
				});
				return check_flag;
			}


			function sendForm(formId, post_url, return_url) {
				if (check_form(formId)) {
					//绑定beforeunload事件
					$(window).unbind('beforeunload', null);
					if ($("#ajax").val() == 1) {
						var vars = $("#" + formId).serialize();
						$.ajax({
							type : "POST",
							url : post_url,
							data : vars,
							dataType : "json",
							success : function(data) {
								if (data.status) {
									ui_alert(data.info, function() {
										if (return_url) {
											location.href = return_url;
										}
									});
								} else {
									ui_error(data.info);
								}
							}
						});
					} else {
						$("#" + formId).attr("action", post_url);
						if (return_url) {
							set_cookie('return_url', return_url);
						}
						$("#" + formId).submit();
					}
				}
			}
			$('#stars1 li').click(function(){
//				alert($(this).attr('rel'))
				$('#stars1-input').val($(this).attr('rel'));
			});
			$('#stars2 li').click(function(){
//				alert($(this).attr('rel'));
				$('#stars2-input').val($(this).attr('rel'));
			});
			$('#cun').click(function(){
			
				sendForm("myForm","{:U('User/saveAppraise')}");
			})

			$('#foot dl').on("touchstart",function(){
			  // alert(1);
			  $('#foot dl').css("background-color","#fff")
			  $(this).css("background-color","#ddd")
			})
			$('#foot dl').on("touchend",function(){
			  // alert(1);
			  $('#foot dl').css("background-color","#fff")

})
</script>
</body>
</html>
